<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>fuint会员营销管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer {
                left: 0;
            }

            .layui-layout-admin .layui-side {
                left: -300px;
            }
        }
    </style>
</head>
<body>

        <!-- 内容主体区域 -->
        <div>
            <!-- 内容主体区域  面包屑-->
            <span class="layui-breadcrumb" lay-separator="/">
              <a href="index.html">首页</a>
              <a><cite>内容管理</cite></a>
              <a href="carousel.html">轮播管理</a>
            </span>

            <!-- 水平线 -->
            <hr class="layui-bg-blue">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_title" placeholder="请输入标题" class="layui-input">
                        </div>

                        <label class="layui-form-label">店铺</label>
<!--                       <form class="layui-form shop-search" style="width: 235px;background-color: #FFFFFF">-->
                                <select name="dp" id="dp" lay-verify="required" lay-filter="xmFilter" class="layui-input-inline layui-input" style="width: 235px;">
                                    <option value="" id="search_shop"></option>
                                </select>



<!--                        <label class="layui-form-label">状态</label>-->
<!--                        <div class="layui-input-inline" >-->
<!--                            <input type="text" id="search_status" placeholder="请输入状态" class="layui-input">-->
<!--                        </div>-->
                        <label class="layui-form-label" id="statusBar">状态</label>
                        <select name="interest" lay-filter="aihao" id="search_status" class="layui-input-inline" style="height: 38px;">
                            <option value="1">启动</option>
                            <option value="0">禁用</option>
                        </select>

                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <table class="layui-hide" id="test" lay-filter="test"></table>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="insertUser">新增轮播</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
<!--                    <button class="layui-btn layui-btn-sm" onclick="deleteSelectedRotations()">删除选中</button>-->
                </div>
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script type="text/html" id="insert_form">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_username" class="layui-input" placeholder="请输入标题">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">所属店铺</label>
                        <select name="dp1" id="dp1" lay-verify="required" lay-filter="Filter" class="layui-input-inline layui-input" style="width: 190px;">
                            <option value="" id="insert_shop"></option>
                        </select>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">状态</label>
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" id="insert_status" class="layui-input" placeholder="请输入状态/默认为0">-->
<!--                        </div>-->
                        <select name="interest1" lay-filter="aihao1" id="insert_status" class="layui-input-inline" style="height: 38px;">
                            <option value="1">启动</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">顺序</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_order" class="layui-input" placeholder="请输入顺序">
                        </div>
                    </div>
                </div>
            </script>

            <script type="text/html" id="update_form">
                <div class="layui-form" lay-filter="update_form">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" id="update_username" class="layui-input" name="username">
                        </div>

                    </div>

                    <div class="layui-form-item layui-form-pane" style="display: flex">
                        <label class="layui-form-label">选择店铺</label>
                        <select name="dp1" id="dp2" lay-verify="required" lay-filter="Filter" class="layui-input-inline layui-input" style="width: 150px;">
                            <option value="" id="update_shop"></option>
                        </select>
                    </div>
<!--                    <div class="layui-form-item layui-form-pane">-->
<!--                        <label class="layui-form-label">状态</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" id="update_age" class="layui-input" name="age">-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="text" id="update_sex" class="layui-input" name="sex">
                        </div>
                    </div>
                </div>
            </script>
        </div>
    </div>
<script src="layui/layui.js"></script>
<script src="jquery/jquery-3.6.0.js"></script>
<script>


  //  let username = sessionStorage.getItem("username");

  //  $("#header_username").text(username);

    $("#iReset").click(function () {
        $("#search_title").val("");//标题
        $("#search_shop").val("");
        $("#search_status").val("");//状态
        tableFlush();
    });

    $("#searchVal").click(function () {

        let search_title = $("#search_title").val();
        let search_shop = $("#dp option:selected").val();
        console.log(search_shop);
        // let search_shop = $("#search_shop").val("value");
        let search_status = $("#search_status option:selected").val();
        let whereJSON = {};
        if (search_title != null && search_title != '') {
            whereJSON.title = search_title;
        }
        if (search_shop != null && search_shop != '') {
            whereJSON.shopId = search_shop;
        }
        if (search_status != null && search_status != '') {
            whereJSON.status = search_status;
        }
        tableFlush(whereJSON);
    });

    function tableFlush(whereJSON) {
        layui.use(['table','form','element'], function () {
            var table = layui.table;
            var form = layui.form;
            var dropdown = layui.dropdown;
            //  render  渲染
            table.render({
                elem: '#test'
                , url: '/carousel/selectByPage'
                , where: whereJSON
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '数据表'
                , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {
                        title: 'ID', width: 120, unresize: true, templet: function (res) {
                            return '<em>' + res.id + '</em>'
                        }
                    }
                    , {
                        title: '标题', width: 200, unresize: true, templet: function (res) {
                            return '<em>' + res.title + '</em>'
                        }
                    }
                    , {
                        title: '所属店铺', width: 200, unresize: true, templet: function (res) {
                            return '<em>' + res.shop.shopName + '</em>'
                        }
                    }
                    , {
                        title: '更新时间', width: 120, unresize: true, templet: function (res) {
                            return '<em>' + res.updateTime + '</em>'
                        }
                    }
                    , {
                        title: '状态', width: 120, unresize: true, templet: function (res) {
                            let menuId = res.id;
                            //console.log(menuId);
                            if (res.status == 1) {
                                return "   <input id='kg' type='checkbox'  menuId = '" + menuId + "' lay-filter='status' lay-skin='switch' lay-text='ON|OFF' checked >"
                            } else if (res.status == 0) {
                                return "   <input id='kg' type='checkbox'  menuId = '" + menuId + "'  lay-filter='status' lay-skin='switch' lay-text='ON|OFF'>"
                            }
                        }
                        // '#ID-table-demo-templet-switch'
                        // function(res){return '<em>'+ res.status +'</em>'}
                    }
                    , {
                        title: '排序', width: 180, unresize: true, templet: function (res) {
                            return '<em>' + res.showOrder + '</em>'
                        }
                    }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                , page: true

            });
           layui.form.on('switch(status)', function (data) {
                // var status = this.status;
                // var name = this.name;
                // layer.tips(status + ' ' + name + ': '+ obj.elem.checked, obj.othis);
                this.checked?data.value=1:data.value=0;  //更改选中和未选中时，传动后台的值，此时选中传1，未选中传0。
                layer.msg('状态：' + (this.checked ? 'on' : 'off'), {
                    offset: '6px',
                    time: 500,
                });
                let menuId = data.elem.attributes['menuId'].nodeValue;
                console.log(menuId);

                // if(data.elem.checked){
                    $.ajax({
                        url: "/carousel/status",           // 请求路径
                        type: "post",                  // 请求的方式，不区分大小写
                        cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify({
                            id:menuId,
                            status: data.value

                        }),
                        datatype: "json",        // 返回类型，text文本、html页面、json数据
                        success: function (response) {
                            console.log("返回: " + response);
                            if (response.code === 200) {
                                layer.msg("修改成功!");
                              //  layer.close(index);                         // 关闭当前窗口
                                // tableFlush();
                                table.reload('test', {});
                            }
                        },
                        error:function(response){
                            console.log("出错返回: " + response);
                        }
                    });

                table.reload('test', {});
                var kg = data.value; //将该值传到后端即可使用。（如，直接在ajax中传值）
                console.log(kg);
                console.log(data);
                console.log(data.id);
                console.log(data.status);
                console.log(data.elem); //得到checkbox原始DOM对象
                console.log(data.elem.checked); //开关是否开启，true或者false
                console.log(data.value); //开关value值，也可以通过data.elem.value得到
                console.log(data.othis); //得到美化后的DOM对象
            });

            // form.on('select(xmFilter)', function(data){
            $.ajax({
                url: '/shop/select',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    console.log(data);//下面会提到这个data是什么值
                    //使用循环遍历，给下拉列表赋值
                    $("#dp").empty();
                    // $('#dp').append(new Option("请输入所属店铺"));
                    $('#dp').append(new Option(""));
                    $.each(data.data, function (index, value) {
                        //console.log(value.shopId);

                        $('#dp').append(new Option(value.shopName, value.shopId));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }

            });
            // return false,
         // })
        //    form.on('select(Filter)', function(data){

            // return false,
          //   })

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                $.ajax({
                    url: '/shop/select',
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        console.log(data);//下面会提到这个data是什么值
                        //使用循环遍历，给下拉列表赋值
                        $("#dp1").empty();
                        $('#dp1').append(new Option("请输入所属店铺"));
                        $.each(data.data, function (index, value) {
                            //console.log(value.shopId);

                            $('#dp1').append(new Option(value.shopName, value.shopId));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");//重新渲染 固定写法
                    }

                });
                switch (obj.event) {
                    case 'insertUser':
                        layer.open({     // 弹出框处理  模态框
                            type: 1               // 模态框
                            , title: '新增' //不显示标题栏
                            , closeBtn: false
                            , area: ['500px', '500px']  // 宽和高
                            , shade: 0.5
                            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            , btn: ['新增', '取消']
                            , btnAlign: 'c'
                            , moveType: 1 //拖拽模式，0或者1
                            , content: $('#insert_form').html()         // 引入自定义表单
                           // ,content: $('#insert_form').html()
                            , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                                // layer.msg("新增按钮执行");
                                let title = $("#insert_username").val();//标题
                                let shopId = $("#insert_password").val();//所属店铺
                                let status= $("#insert_status option:selected").val();
                                let order=$("#insert_order").val();
                                let insert_shop = $("#dp1 option:selected").val();
                                $.ajax({
                                    url: "/carousel/insert",           // 请求路径
                                    type: "post",                  // 请求的方式，不区分大小写
                                    cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                    contentType: "application/json;charset=utf-8",
                                    data: JSON.stringify({
                                        title: title,
                                        shopId: insert_shop,
                                        status:status,
                                        showOrder:order
                                    }),
                                    datatype: "json",        // 返回类型，text文本、html页面、json数据
                                    success: function (response) {
                                        // layui.form.render("select");
                                        console.log("返回: " + response);
                                        if (response.code === 200) {
                                            layer.msg("新增成功!");
                                            layer.close(index);                         // 关闭当前窗口
                                           // tableFlush();
                                            table.reload('test', {});
                                        }
                                    },
                                    error: function (response) {
                                        console.log("出错返回: " + response);
                                    }
                                });
                            }
                            , success: function (layero) {

                            }
                        });
                        break;
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                }
                ;


            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                console.log(data)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "/carousel/deleteById",           // 请求路径
                            type: "post",                  // 请求的方式，不区分大小写
                            cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            data: {
                                id: data.id
                            },
                            datatype: "json",        // 返回类型，text文本、html页面、json数据
                            success: function (response) {
                                console.log("返回: " + response);
                                if (response.code === 200) {
                                    layer.msg("删除成功!");
                                    layer.close(index);                         // 关闭当前窗口
                                    //tableFlush();
                                    table.reload('test', {});
                                }
                            },
                            error: function (response) {
                                console.log("出错返回: " + response);
                            }
                        });
                    });
                } else if (obj.event === 'edit') {
                    $.ajax({
                        url: '/shop/select',
                        dataType: 'json',
                        type: 'get',
                        success: function (data) {
                            console.log(data);//下面会提到这个data是什么值
                            //使用循环遍历，给下拉列表赋值
                            $("#dp2").empty();
                            $('#dp2').append(new Option(""));
                            $.each(data.data, function (index, value) {
                                //console.log(value.shopId);

                                $('#dp2').append(new Option(value.shopName, value.shopId));// 下拉菜单里添加元素
                            });
                            layui.form.render("select");//重新渲染 固定写法
                        }

                    });
                    layer.open({
                        type: 1 //Page层类型
                        , skin: 'layui-layer-molv'
                        , area: ['500px', '500px']
                        , title: ['编辑信息', 'font-size:18px']
                        , btn: ['确定', '取消']
                        , shadeClose: true
                        , shade: 0 //遮罩透明度
                        , maxmin: true //允许全屏最小化
                        , content: $('#update_form').html()  //弹窗路径
                        , success: function (layero, index) {
                            $('#update_username').val(data.title);
                           // $('#update_shop').val(data.shop.shopName);
                            $("#dp2 option:selected").val(data.shop.shopName);
                            // $('#update_age').val(data.status);
                            $('#update_sex').val(data.showOrder);
                        },
                        yes: function (index, layero) {

                            $.ajax({
                                url: "/carousel/updateById",           // 请求路径
                                type: "post",                  // 请求的方式，不区分大小写
                                cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    id:data.id,
                                    title: $('#update_username').val(),
                                    shopId: $('#dp2 option:selected').val(),
                                    // status: $('#update_age').val(),
                                    showOrder: $('#update_sex').val(),
                                }),
                                datatype: "json",        // 返回类型，text文本、html页面、json数据
                                success: function (response) {
                                    console.log("返回: " + response);
                                    if (response.code === 200) {
                                        layer.msg("修改成功!");
                                        layer.close(index);                         // 关闭当前窗口
                                        // tableFlush();
                                        table.reload('test', {});
                                    }
                                },
                                error:function(response){
                                    console.log("出错返回: " + response);
                                }
                            });
                        }
                    });
                }

            });
        });
    }

    tableFlush();
</script>
<style>
    .layui-btn {
        height: 30px;
        line-height: 30px;
    }
    .shop-search{
        display: flex;
    }
</style>
        <style>
            .layui-breadcrumb a {
                color: black !important;
            }
            .layui-breadcrumb{
                padding: 10px;
            }
        </style>
</body>
</html>
